<template>
  <div class="home">
    <el-row class="box">
      <el-col :span="4">
        <div class="box1">
          <el-button
            :type="index === btnindex ? 'primary' : ''"
            v-for="(item, index) in menuData"
            :key="index"
            @click.native="goTo(item, index)"
            @dblclick.native="putItem(item, index)"
            >{{ item.title }}</el-button
          >
        </div>
      </el-col>
      <el-col :span="10">
        <div class="box2">
          <div v-for="(item, index) in numarr" :key="index">{{ item }}</div>
          <el-button v-show="numarr == 0" @click="changeStart">开始</el-button>
        </div>
      </el-col>
      <el-col :span="10">
        <div class="box3">
          <el-statistic
            v-show="numarr.length > 0"
            ref="statistic"
            :value="deadline2"
            time-indices
            title=""
            :value-style="{ fontSize: '50px' }"
            @finish="changeFinish"
          ></el-statistic>
          <div></div>
          <div></div>
        </div>
      </el-col>
    </el-row>

    <el-dialog title="修改秒" :visible.sync="dialogVisible" width="300px">
      <el-form :model="formdata" label-width="80px">
        <el-form-item label="秒">
          <el-input-number
            v-model="formdata.second"
            controls-position="right"
            :min="1"
            :max="9999999"
          ></el-input-number>
        </el-form-item>
        <el-form-item label="个数">
          <el-input-number
            v-model="formdata.num"
            controls-position="right"
            :min="1"
            :max="9999999"
            :disabled="formdata.types === 0"
          ></el-input-number>
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button @click="dialogVisible = false">取 消</el-button>
        <el-button type="primary" @click="Chahngesubit">确 定</el-button>
      </span></el-dialog
    >
  </div>
</template>

<script>
import Sqlite from "../sqlite3";
const db = Sqlite.getInstance();
export default {
  name: "HomeView",
  data() {
    return {
      btnindex: null,
      menuData: [],
      deadline2: null,
      numarr: [],
      dialogVisible: false,
      formdata: {},
    };
  },
  methods: {
    goTo(item, index) {
      this.btnindex = index;
    },

    changeStart() {
      let item = this.menuData[this.btnindex];
      this.deadline2 = Date.now() + item.second * 1000;
      this.numarr = [];
      switch (this.btnindex) {
        case 0:
          this.numarr = this.randomNum(item.num);
          break;
        case 1:
          this.numarr = this.randomNum2(item.num);
          break;
        case 2:
          this.numarr = this.randomNum3(item.num);
          break;
        case 3:
          this.numarr = this.randomNum4(item.num);
          break;
      }
      // this.$refs.statistic.start();
    },

    // 倒计时结束
    changeFinish(e) {
      this.numarr = [];
      this.btnindex = null;
    },

    // 随机出5个0-19的数，小于10的数前面加0
    randomNum(num) {
      let arr = [];
      for (let i = 0; i < num; i++) {
        let num = Math.floor(Math.random() * 20);
        if (num < 10) {
          num = "0" + num;
        }
        arr.push(num);
      }
      return arr;
    },

    // 0-255之间随机5个三位数，小于100的数前面加0
    randomNum2(num) {
      let arr = [];
      for (let i = 0; i < num; i++) {
        let num = Math.floor(Math.random() * 256);
        if (num < 100) {
          num = "0" + num;
        }
        arr.push(num);
      }
      return arr;
    },

    // 30000-87975之间随机5个位数，并且是25的倍数，长度不足5位的前面补0
    randomNum3(num) {
      let arr = [];
      for (let i = 0; i < num; i++) {
        let num = Math.floor(Math.random() * 57975 + 30000);
        if (num % 25 !== 0) {
          num = num + (25 - (num % 25));
        }
        if (num < 10000) {
          num = "0" + num;
        }
        arr.push(num);
      }
      return arr;
    },

    randomNum4(num) {
      return [
        ...this.randomNum3(num),
        ...this.randomNum(num),
        ...this.randomNum(num),
        ...this.randomNum2(num),
        ...this.randomNum2(num),
      ];
    },

    // 双击修改
    putItem(item, index) {
      console.log(item, index, "item, index");
      console.log("双击");
      this.dialogVisible = true;
      this.formdata = item;
      this.btnindex = index;
    },

    async Chahngesubit() {
      let item = this.menuData[this.btnindex];
      await db.run(`UPDATE test SET second = ?, num = ? WHERE title = ?`, [
        this.formdata.second,
        this.formdata.num,
        item.title,
      ]);
      this.menuData = await db.all("SELECT * FROM test");
      this.dialogVisible = false;
    },

    // 实现格式为HH:mm:ss.SSS的倒计时函数
    // countdown() {
    //   let now = new Date();
  },
  async mounted() {
    await db.connect("user");
    // console.log(db, "db");
    // 如果表不存在则创建表
    await db.run(
      "CREATE TABLE IF NOT EXISTS test(id INTEGER PRIMARY KEY AUTOINCREMENT, title char, second int, num int, types int)"
    ); //创建表及字段
    // test表中没有数据则插入数据
    const response = await db.all("SELECT * FROM test"); //查询数据
    if (response.length === 0) {
      let data = [
        { title: "两位数", second: 2, num: 1, stat: 1 },
        { title: "三位数", second: 2, num: 1, stat: 1 },
        { title: "五位数", second: 2, num: 1, stat: 1 },
        { title: "混合", second: 2, num: 1, stat: 0 },
      ];

      let insertPromises = data.map((item) => {
        return db.run(
          `INSERT INTO test (title, second, num, types) VALUES (?, ?, ?, ?)`,
          [item.title, item.second, item.num, item.stat]
        );
      });

      await Promise.all(insertPromises);
      this.menuData = await db.all("SELECT * FROM test");
    } else {
      this.menuData = response;
    }
    console.log(this.menuData, "this.menuData");
    // await db.run('CREATE TABLE IF NOT EXISTS test(a int, b char)')//创建表及字段
    // await db.run('CREATE TABLE IF NOT EXISTS test1(a int, b char)')//创建表及字段
    // await db.run(`INSERT INTO test1 VALUES(10, 'abcd')`)//添加数据
    // const response = await db.all('SELECT * FROM test')//查询数据
    // console.log(response,"12121")
    // db.close()
  },
};
</script>
<style lang="scss" scoped>
.home {
  width: 100%;
  height: 100vh;
  .box {
    width: 100%;
    height: 100%;

    .el-col {
      height: 100%;
      padding: 0;
    }
  }

  .box1 {
    width: 100%;
    height: 100%;
    // background-color: #409eff;
    display: flex;
    flex-direction: column;
    padding: 20px;

    .el-button {
      width: 100%;
      margin: 0 auto 20px auto;
    }
  }
  .box2 {
    width: 100%;
    height: 100%;
    // background-color: #67c23a;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    padding: 20px;

    div {
      font-size: 60px;
    }
  }
  .box3 {
    width: 100%;
    height: 100%;
    // background-color: #e6a23c;
    display: flex;
    flex-direction: column;
    justify-content: space-around;
    padding: 20px;
  }
}
</style>